<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无人机详情 - ${drone.model}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 400px;
            width: 100%;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .status-badge {
            font-size: 0.9rem;
            padding: 5px 10px;
        }
        .battery-indicator {
            height: 25px;
            border-radius: 3px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h1>${drone.model} <small class="text-muted">详细信息</small></h1>
                <a href="/drone/" class="btn btn-outline-primary btn-sm">返回无人机列表</a>
            </div>
        </div>
        
        <div class="row">
            <!-- 左侧信息面板 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">基本信息</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>ID:</strong> ${drone.id}</p>
                        <p><strong>型号:</strong> ${drone.model}</p>
                        <p>
                            <strong>状态:</strong> 
                            <c:choose>
                                <c:when test="${drone.status == 'FLYING'}"><span class="badge bg-success status-badge">飞行中</span></c:when>
                                <c:when test="${drone.status == 'RETURNING'}"><span class="badge bg-info status-badge">返航中</span></c:when>
                                <c:when test="${drone.status == 'LANDING'}"><span class="badge bg-warning status-badge">降落中</span></c:when>
                                <c:otherwise><span class="badge bg-secondary status-badge">待机</span></c:otherwise>
                            </c:choose>
                        </p>
                        <p>
                            <strong>电池电量:</strong> ${drone.batteryLevel}%
                            <div class="progress battery-indicator">
                                <c:choose>
                                    <c:when test="${drone.batteryLevel > 70}"><div class="progress-bar bg-success" style="width: ${drone.batteryLevel}%"></div></c:when>
                                    <c:when test="${drone.batteryLevel > 30}"><div class="progress-bar bg-warning" style="width: ${drone.batteryLevel}%"></div></c:when>
                                    <c:otherwise><div class="progress-bar bg-danger" style="width: ${drone.batteryLevel}%"></div></c:otherwise>
                                </c:choose>
                            </div>
                        </p>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">飞行数据</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>高度:</strong> ${drone.altitude} 米</p>
                        <p><strong>速度:</strong> ${drone.speed} m/s</p>
                        <p><strong>坐标:</strong> ${drone.latitude}, ${drone.longitude}</p>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">控制</h5>
                    </div>
                    <div class="card-body">
                        <form action="/drone/control" method="post">
                            <input type="hidden" name="droneId" value="${drone.id}">
                            <div class="d-grid gap-2">
                                <button type="submit" name="action" value="takeoff" class="btn btn-success mb-2">起飞</button>
                                <button type="submit" name="action" value="land" class="btn btn-warning mb-2">降落</button>
                                <button type="submit" name="action" value="return" class="btn btn-info mb-2">返航</button>
                                <button type="submit" name="action" value="hover" class="btn btn-secondary mb-2">悬停</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 右侧地图和任务面板 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">位置信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="map"></div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">任务管理</h5>
                    </div>
                    <div class="card-body">
                        <a href="/mission/create?droneId=${drone.id}" class="btn btn-primary mb-3">创建新任务</a>
                        
                        <h6>最近任务</h6>
                        <div class="list-group">
                            <c:forEach var="mission" items="${missions}" end="2">
                                <a href="/mission/view?id=${mission.id}" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">${mission.name}</h6>
                                        <small>
                                            <c:choose>
                                                <c:when test="${mission.status == 'EXECUTING'}"><span class="badge bg-success">执行中</span></c:when>
                                                <c:when test="${mission.status == 'COMPLETED'}"><span class="badge bg-info">已完成</span></c:when>
                                                <c:when test="${mission.status == 'ABORTED'}"><span class="badge bg-danger">已中止</span></c:when>
                                                <c:otherwise><span class="badge bg-secondary">计划中</span></c:otherwise>
                                            </c:choose>
                                        </small>
                                    </div>
                                    <p class="mb-1">航点数量: ${fn:length(mission.waypoints)}</p>
                                </a>
                            </c:forEach>
                            <c:if test="${empty missions}">
                                <p class="text-muted">暂无任务</p>
                            </c:if>
                        </div>
                        
                        <a href="/mission/list?droneId=${drone.id}" class="btn btn-outline-primary btn-sm mt-2">查看所有任务</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 初始化地图
        const map = L.map('map').setView([${drone.latitude}, ${drone.longitude}], 15);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        // 添加无人机标记
        const marker = L.circleMarker([${drone.latitude}, ${drone.longitude}], {
            radius: 8,
            fillColor: '#007bff',
            color: '#fff',
            weight: 2,
            opacity: 1,
            fillOpacity: 0.8
        }).addTo(map);
        
        marker.bindPopup(`
            <strong>${drone.model}</strong><br>
            状态: ${drone.status}<br>
            电池: ${drone.batteryLevel}%<br>
            高度: ${drone.altitude}m
        `).openPopup();
        
        // 自动刷新页面
        setTimeout(function() {
            location.reload();
        }, 5000);
    </script>
</body>
</html>